<template>
  <div v-loading="loading" class="app-container dialog">
    <div class="title">数据交互</div>
    <div class="Subhead">基本信息</div>
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-position="right"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="标题" prop="title">
        <el-input style="width: 760px" v-model="form.title"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="6">
          <el-form-item label="联系人" prop="contact_person">
            <el-input v-model="form.contact_person"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="负责人" prop="person_in_charge">
            <el-input v-model="form.person_in_charge"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系方式" prop="contact_information">
            <el-input v-model="form.contact_information"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item label="单位审核" prop="unit_audit">
            <el-radio-group @change="UnitAuditChange" v-model="form.unit_audit">
              <el-radio label="true">是</el-radio>
              <el-radio label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item v-if="IsUnitAudit" label="审核单位" prop="audit_unit">
            <el-cascader
              :props="{ value: 'id', checkStrictly: true }"
              :show-all-levels="false"
              @change="deptChange"
              v-model="officeId"
              placeholder="请选择，可搜索"
              :options="dept"
              clearable
              filterable
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item v-if="IsUnitAudit" label="审核人员" prop="Auditunit">
            <el-select
              clearable
              style="width: 200px"
              v-model="form.audit_person"
              :placeholder="form.officeId ? '请选择审核人员' : '请先选择审核部门'"
            >
              <el-option v-for="item in users" :key="item.userName" :label="item.nickName" :value="item.userName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="Subhead">故障信息</div>
      <el-row>
        <el-col :span="6">
          <el-form-item label="应用系统" prop="appSystem">
            <el-select clearable filterable v-model="form.appSystem" @change="changeappSystem">
              <el-option v-for="item in xtList" :key="item.id" :label="item.projectname" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="交换类型" prop="exchange_type">
            <el-select clearable filterable v-model="form.exchange_type">
              <el-option v-for="item in ExchangeType" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="交互方式" prop="interaction_mode">
            <el-select clearable filterable v-model="form.interaction_mode">
              <el-option v-for="item in InteractionModeList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="tabletitle">
        协议交互
        <img
          style="width: 20px; cursor: pointer; vertical-align: middle"
          @click="add()"
          src="../../../assets/icons/add.png"
          alt=""
        />
      </div>
      <Table :columns="columns" :data="data">
        <template slot-scope="{ row, index }" slot="InternetIP">
          <el-input v-model="data[index].InternetIP"></el-input>
        </template>
        <template slot-scope="{ row, index }" slot="InternetPort">
          <el-input v-model="data[index].InternetPort"></el-input>
        </template>
        <template slot-scope="{ row, index }" slot="extranetIP">
          <el-input v-model="data[index].extranetIP"></el-input>
        </template>
        <template slot-scope="{ row, index }" slot="extranetPort">
          <el-input v-model="data[index].extranetPort"></el-input>
        </template>

        <template slot-scope="{ row, index }" slot="agreement">
          <el-select clearable filterable v-model="data[index].agreement">
            <el-option v-for="item in agreementList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </template>
        <template slot-scope="{ row, index }" slot="InteractionTime">
          <el-select clearable filterable v-model="data[index].InteractionTime">
            <el-option v-for="item in InteractionTimeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </template>
        <template slot-scope="{ row, index }" slot="remarks">
          <Input type="text" v-model="data[index].remarks" />
        </template>

        <template slot-scope="{ row, index }" slot="action">
          <!-- <Button @click="handleSave(row, index)">保存</Button> -->
          <Button type="error" @click="remove(index)">删除</Button>
          <!-- <div v-if="editIndex === index">
                    <Button @click="handleSave(index)">保存</Button>
                    <Button @click="editIndex = -1">取消</Button>
                </div>
                <div v-else>
                    <Button @click="handleEdit(row, index)">操作</Button>
                    <Button type="error" @click="remove(index)">删除</Button>
                </div> -->
        </template>
      </Table>
      <file-list ref="fileList" :fileList="form.fileList" @changeFileList="changeFileList" @upload="upload" />
      <div style="text-align: center; margin-top: 20px; margin-bottom: 20px">
        <el-button type="success" @click="sumit"> 提交工单 </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { treeselect } from "@/api/system/dept";
import Editor from "@/components/Editor";
import { AllcloudUpList } from "@/api/cloud/cloud";
import { listUser2 } from "@/api/system/user";
import { definition } from "@/api/WorkOrder/OperationMaintenance.js";
import fileList from "@/components/FileList/index.vue";
export default {
  name: "ArrayInteraction",
  components: {
    Editor,
    fileList,
  },
  data() {
    return {
      loading: false,
      form: {
        title: "",
        contact_person: "",
        person_in_charge: "",
        contact_information: "",
        appSystem: "",
        exchange_type: "",
        interaction_mode: "",
        unit_audit: "false",
        audit_unit: "",
        audit_person: "",
        protocol_interaction: "",
      },
      cloudSupplier: "",
      appSystem: "",
      //部门列表树结构
      dept: [],
      //上云系统列表
      xtList: [],
      // 部门id
      officeId: "",
      // 关机时间下拉数组
      ShutDownList: [
        {
          id: "1",
          name: "上班时间",
        },
        {
          id: "2",
          name: "非上班时间",
        },
        {
          id: "3",
          name: "不能关闭",
        },
        {
          id: "4",
          name: "其他时间",
        },
      ],
      // 系统状态
      SystemStateList: [
        {
          id: "1",
          name: "从系统选择",
        },
        {
          id: "2",
          name: "其他",
        },
      ],
      // 操作系统下拉数据
      operatingSystemList: [
        {
          id: "1",
          name: "Linux",
        },
        {
          id: "2",
          name: "Windows",
        },
      ],
      // 网络环境下拉数据
      networkList: [
        {
          id: "1",
          name: "政务外网",
        },
        {
          id: "2",
          name: "互联网",
        },
      ],
      // 交互类型
      ExchangeType: [
        {
          id: "资源池内交互",
          name: "资源池内交互",
        },
        {
          id: "跨网交互",
          name: "跨网交互",
        },
        {
          id: "其他交互",
          name: "其他交互",
        },
      ],
      // 交互方式
      InteractionModeList: [
        {
          id: "协议交互",
          name: "协议交互",
        },
        {
          id: "文件交互",
          name: "文件交互",
        },
        {
          id: "数据库交互",
          name: "数据库交互",
        },
      ],
      // 协议下拉数据
      agreementList: [
        {
          id: "http",
          name: "http",
        },
        {
          id: "https",
          name: "https",
        },
        {
          id: "ftp",
          name: "ftp",
        },
        {
          id: "snmp",
          name: "snmp",
        },
        {
          id: "其他",
          name: "其他",
        },
      ],
      // 交互时间
      InteractionTimeList: [
        {
          id: "每月",
          name: "每月",
        },
        {
          id: "每周",
          name: "每周",
        },
        {
          id: "每天",
          name: "每天",
        },
        {
          id: "实时",
          name: "实时",
        },
        {
          id: "不定期",
          name: "不定期",
        },
        {
          id: "其他",
          name: "其他",
        },
      ],
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        contact_person: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        person_in_charge: [{ required: true, message: "请输入负责人", trigger: "blur" }],
        contact_information: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
        appSystem: [
          {
            required: true,
            message: "请选择应用系统",
            trigger: "change",
          },
        ],
      },
      applicationSystem: null,
      IpType: null,
      PortManage: null,
      port: null,
      portType: null,
      remarks: null,
      columns: [
        {
          title: "互联网IP",
          slot: "InternetIP",
        },
        {
          title: "互联网端口",
          slot: "InternetPort",
        },
        {
          title: "政务外网IP",
          slot: "extranetIP",
        },
        {
          title: "政务外网端口",
          slot: "extranetPort",
        },
        {
          title: "协议",
          slot: "agreement",
        },
        {
          title: "交互时间",
          slot: "InteractionTime",
        },
        {
          title: "备注",
          slot: "remarks",
        },
        {
          title: "操作",
          slot: "action",
        },
      ],
      data: [],
      editIndex: -1, // 当前聚焦的输入框的行数
      editapplicationSystem: "",
      editIpType: "",
      editPortManage: "",
      editport: "",
      editportType: "",
      editremarks: "",
      IsUnitAudit: false,
      // 用户数据
      users: [],
    };
  },
  created() {
    this.GetListSelect();
  },
  methods: {
    changeFileList(fileList) {
      this.$set(this.form, "fileList", fileList);
    },
    changeappSystem(val) {
      this.xtList.forEach((item) => {
        if (item.id == val) {
          this.cloudSupplier = item.supplierCode;
        }
      });
    },
    getName(data, id) {
      data.forEach((item) => {
        if (item.id == id) {
          this.form.officeName = item.label;
        } else if (item.children && item.children.length) {
          this.getName(item.children, id);
        }
      });
    },
    deptChange(e) {
      this.users = [];
      this.form.audit_person = "";
      this.form.audit_unit = "";
      if (e.length) {
        this.form.audit_unit = e[e.length - 1];
        this.getName(this.dept, this.form.audit_unit);
        listUser2({
          deptId: this.form.audit_unit,
          pageNum: 1,
          pageSize: 10000000,
        }).then((response) => {
          this.users = response.rows;
        });
      }
    },
    UnitAuditChange(e) {
      if (e == "true") {
        this.IsUnitAudit = true;
      } else {
        this.IsUnitAudit = false;
      }
    },
    GetListSelect() {
      treeselect({}).then((response) => {
        this.dept = response.data;
      });
      AllcloudUpList().then((response) => {
        this.xtList = response.rows;
      });
    },
    DeleteFile(data, index) {
      this.fileList = this.fileList.filter((item) => {
        if (item.uid == data.uid) {
        } else {
          return item;
        }
      });
    },
    add() {
      let addObj = JSON.parse(
        JSON.stringify({
          InternetIP: "",
          InternetPort: "",
          extranetIP: "",
          extranetPort: "",
          agreement: "",
          InteractionTime: "",
          remarks: "",
        })
      );
      this.data.push(addObj);
    },
    handleSave(row, index) {
      this.data[index] = row;
    },
    remove(index) {
      this.$confirm("此操作将永久删除该行数据, 是否继续?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.data.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 返回上级
    ReturnSuperior() {
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex((item) => item.path === this.$route.path),
        1
      );
      this.$destroy(this.$options.name);
      this.$router.go(-1);
    },
    sumit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$refs.fileList.upload();
        } else {
          return false;
        }
      });
    },

    //上传文件回调
    upload(files) {
      if (files) {
        this.form.protocol_interaction = this.data;
        let obj = {
          files,

          formData: this.form,
          variables: {
            cloudSupplier: this.cloudSupplier.toLowerCase() + "_cloud_provider",
            deptId: sessionStorage.getItem("deptId"), //当前登录人部门
            deptScope: "UP_CASCADE", //部门范围，向上级联
          },
          formDefKey: "dataInteraction",
          title: this.form.title,
        };
        definition("xiezhu_data", obj)
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.form = {};
              this.form.unit_audit = "false";
              this.form.audit_unit = null;
              this.form.audit_person = null;
              this.ReturnSuperior();
              this.loading = false;
            }
          })
          .catch((err) => {
            this.loading = false;
          });
      } else {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.dialog {
  .title {
    text-align: left;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
    padding-left: 4px;
    border-left: 4px solid #38b3aa;
  }
  .Subhead {
    text-align: left;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: bold;
    padding-left: 4px;
    border-left: 2px solid #38b3aa;
  }
  .tabletitle {
    width: 100%;
    text-align: center;
    font-weight: bold;
    border: 1px solid rgb(248, 248, 249);
    height: 40px;
    line-height: 40px;
    border-bottom: none;
  }
}
</style>
